<template>
  <view class="page">
    <!-- 第一层：头像和昵称 -->
    <view class="profile-header">
      <view class="avatar"></view>
      <view class="profile-info">
        <text class="nickname">爱打板的小韭菜</text>
        <view class="vip-badge">VIP</view>
      </view>
    </view>

    <!-- 第一层和第二层之间的分隔线 -->
    <view class="divider"></view>

    <!-- 第二层：工具导航栏 -->
    <view class="tools">
      <view class="tool-item" v-for="(tool, index) in tools" :key="index" @click="tool.action">
        <view class="tool-content">
          <image :src="tool.icon" class="tool-icon" mode="widthFix" />
          <text class="tool-title">{{ tool.title }}</text>
        </view>
        <view class="tool-right-icons">
          <uni-icon class="arrow-icon" type="arrowright" size="20" color="#999" />
          <image src="/static/icons/right_arrow.png" class="extra-icon" mode="widthFix" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tools: [
        { title: 'VIP', icon: '/static/icon/menu_vip.png', action: this.goToVip },
        { title: '我的积分', icon: '/static/icon/menu_point.png', action: this.goToPoints },
        { title: '邀请好友', icon: '/static/icon/menu_invite.png', action: this.inviteFriend },
        { title: '联系客服', icon: '/static/icon/menu_contact.png', action: this.contactSupport },
        { title: '帮助中心', icon: '/static/icon/menu_help.png', action: this.goToHelp }
      ]
    };
  },
  methods: {
    goToVip() {
      uni.showToast({ title: '敬请期待', icon: 'none' });
    },
    goToPoints() {
      uni.showToast({ title: '敬请期待', icon: 'none' });
    },
    inviteFriend() {
      uni.showToast({ title: '敬请期待', icon: 'none' });
    },
    contactSupport() {
      uni.showToast({ title: '敬请期待', icon: 'none' });
    },
    goToHelp() {
      uni.showToast({ title: '敬请期待', icon: 'none' });
    }
  }
};
</script>

<style>
.page {
  padding: 20px;
}

/* 用户信息部分 */
.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 15px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #dcdcdc;
  margin-right: 15px;
}

.profile-info {
  display: flex;
  align-items: center;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.vip-badge {
  padding: 5px 10px;
  background-color: #FFA500;
  color: #fff;
  border-radius: 15px;
  font-size: 14px;
  text-align: center;
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: #eaeaea;
  margin: 20px 0;
}

/* 工具栏 */
.tools {
  margin-top: 10px;
}

.tool-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  cursor: pointer;
}

.tool-item:hover {
  background-color: #f4f4f4;
}

.tool-content {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.tool-icon {
  width: 24px;
  height: 24px;
  margin-right: 15px;
}

.tool-title {
  font-size: 16px;
  color: #333;
}

.tool-right-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arrow-icon {
  margin-left: 15px;
}

.extra-icon {
  width: 20px;
  height: 20px;
}

.tool-item + .tool-item {
  border-top: 1px solid #eaeaea;
}
</style>